<script setup>
import { useRouter } from 'vue-router';
import avatar from '@/assets/avatar.jpeg'
const router = useRouter();
const handleClick = ()=>{
    router.back()
}
const onHistory = ()=>{
    router.push("/history")
}
</script>

<template>
    <div class="my-page">
        <t-navbar class="my-header" title="我的" :fixed="false" left-arrow @left-click="handleClick" />
        <div class="avatar-box">
            <t-avatar
            :image="avatar"
            shape="round"
            ></t-avatar>
        </div>
        <t-cell-group bordered>
            <t-cell @click="onHistory" title="我的提问" arrow hover />
            <t-cell title="我的信息" arrow hover />
            <t-cell title="我的设置" arrow hover />
        </t-cell-group>

    </div>
</template>

<style lang="scss" scoped>
.my-header {
    :deep(.t-navbar__content) {
        background-color: #07c160;
        color: #fff;
    }
}
.avatar-box {
    text-align: center;
    padding: 20px 0;
    :deep(.t-avatar__wrapper) {
        .t-avatar--medium {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    }
}
</style>